// 1、导入 racet 核心依赖
import React from 'react'
import ReactDOM from 'react-dom/client'
import './style/index.css'

//2、创建项目根的实例：ReactDOM.createRoot（spa应用跟组件挂载点元素 dom对象）
const root = ReactDOM.createRoot(document.getElementById('root'))
const songs = [
  { id: 1, name: '痴心绝对' },
  { id: 2, name: '像我这样的人' },
  { id: 3, name: '南山南' }
]
const list = () => {
  const _list = []
  songs.forEach((item) => {
    _list.push(<li key={item.id}>{item.name}</li>)

  })
  return _list

}

/*
  控制jsx 样式
  1、行内样式
    语法：style={{css属性名字1：css属性值1，css属性名字2：css属性值2，.。。}}
  2、类名控制（控制）
  3、
*/







const div = (
  <>
    <ul className='box' style={{ border: '8px solid red' }}>
      {list()}
    </ul>
    <hr />

  </>
)


root.render(
  // ul,
  // box,
  div
)
